<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>块和内嵌</title>
    
</head>
<body>
    <!-- 
        内联，内嵌，行内属性标签：
            1、默认同行可以继续跟同类型标签
            2、内容撑开宽度
            3、不支持宽高(input标签除外)
            4、不支持上下的margin和padding
	        5、代码换行被解析

        块属性标签：
            1、默认独占一行显示
            2、没有宽度时，默认撑满一排
            3、支持所有css命令
        总结:html标签都是块元素和内嵌元素的折腾,
    -->

    <!-- 
        inline-block特性：
            1、使块元素在一行显示；
            2、行内属性标签支持宽高(使内嵌元素支持宽高)
            3、没有宽度的时候内容撑开宽度

            问题：
            1、代码换行被解析；
            2、ie6 ie7 不支持块属性标签的inline-block;

     -->

     <!-- 
        display:block;  显示为块
        display:inline;  显示为内嵌
        display:inline-block;块元素和内嵌元素的转换
        p标签中不能存放div!!!!!
      -->
      <style>
          span,div{
            background:blue; width:100px; height:100px; display:inline-block;
          }
      </style>
     <span>123</span>
     <div>689</div>
</body>
</html>